<template>
  <div class="tool-row">
    <el-button type="primary" @click="showAdd">新增</el-button>
    <el-dialog
      title="新增课程"
      :visible.sync="formVisible"
      :append-to-body="true">
      <el-form>
         <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年级范围" :label-width="formLabelWidth">
          <el-select v-model="range1" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
              <el-option-group
                v-for="(item, index) in gradeOptionList"
                :key="index"
                :label="item.name">
                <el-option
                  v-for="(jItem, jIndex) in item.options"
                  :key="jIndex"
                  :label="jItem.name"
                  :value="jItem.value">
                </el-option>
              </el-option-group>
          </el-select>
          --
          <el-select v-model="range2" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option-group
              v-for="(item, index) in gradeOptionList"
              :key="index"
              :label="item.name">
              <el-option
                v-for="(jItem, jIndex) in item.options"
                :key="jIndex"
                :label="jItem.name"
                :value="jItem.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as util from '@/assets/js/util'

export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      formVisible: false,
      name: '',
      title: '',
      startTime: '',
      endTime: '',
      payment: '',
      teacher: '',
      range1: '',
      range2: '',
      formLabelWidth: '120px'
    }
  },
  computed: {
    ...mapGetters({
      gradeList: 'gradeList',
      educationList: 'educationList'
    }),
    gradeOptionList () {
      let array = []
      if (this.type) {
        array.push({
          name: util.getValueByType(this.educationList, this.type, 'educationType', 'educationName'),
          value: this.type,
          options: []
        })
        array.forEach(item => {
          this.gradeList.forEach(jItem => {
            if (item.value === jItem.educationType) {
              item.options.push({
                name: jItem.gradeName,
                value: jItem.gradeType
              })
            }
          })
        })
      } else {
        let educationTypeArr = this.gradeList.map(item => item.educationType)
        educationTypeArr = Array.from(new Set(educationTypeArr))
        educationTypeArr.forEach(item => {
          array.push({
            name: util.getValueByType(this.educationList, item, 'educationType', 'educationName'),
            value: item,
            options: []
          })
        })
        array.forEach(item => {
          this.gradeList.forEach(jItem => {
            if (item.value === jItem.educationType) {
              item.options.push({
                name: jItem.gradeName,
                value: jItem.gradeType
              })
            }
          })
        })
      }
      console.log(array)
      /*
      if (this.type) {
        this.gradeList.forEach(item => {
          if (this.type === item.educationType) {
            array[0].option.push({
              name: util.getValueByType(this.educationList, item.educationType, 'educationType', 'educationName') + item.gradeName,
              value: item.gradeType
            })
          }
        })
      } else {
        array = this.gradeList.map(item => {
          return {
            name: util.getValueByType(this.educationList, item.educationType, 'educationType', 'educationName') + item.gradeName,
            value: item.gradeType
          }
        })
      }
      */
      return array
    }
  },
  methods: {
    showAdd () {
      this.formVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/var.scss";
  .tool-row {
    position: fixed;
    z-index: 100;
    height: 60px;
    left: 220px;
    right: 20px;
    top: 60px;
    box-sizing: border-box;
    background-color: $white;
    padding: 10px;
  }
</style>
